<!DOCTYPE html>
<html>
<head>

    <title>DT1车库信息</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">


    <!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->

    <!-- Bootstrap Core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="../css/metisMenu.min.css" rel="stylesheet">

    <!-- DataTables CSS -->
    <link href="../css/dataTables.bootstrap.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="../css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="../css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="../css/boot-crm.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
        var pageSize = 10;    //每页显示的记录条数
        var curPage=1;        //当前页
        var lastPage;        //最后页
        var direct=0;        //方向
        var len;            //总行数
        var page;            //总页数
        var begin;
        var end;

        $(document).ready(function display(){
            $.ajax({
                url : "../controller/history2",
                type : "get",
                data : $("#form2").serialize(),
                datatype : "json",
                success : function(data){
                    if(data===''){
                        alert("获取数据失败");
                    }else{
                        alert("获取数据成功");
                        var ob=eval("("+data+")");
                        for (var i = 0; i < ob.length; i++) {
                            var trHTML="<tr><td>"+ob[i].Vehicle_id+"</td><td>"+ob[i].Vehicle_status+"</td><td>"+ob[i].Vehicle_number+"</td><td>"+ob[i].entry_time+"</td><td>"+ob[i].leave_time+"</td><td>"+ob[i].time_quantum+"</td><td>"+ob[i].spend+
                                "</td></tr>"
                            //在table的最后一行添加遍历的值
                            $("#table1").append(trHTML);
                        }
                        len =$("#table1 tr").length - 1;    // 求这个表的总行数，剔除第一行介绍
                        page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数，计算页数
                        // alert("page==="+page);
                        curPage=1;    // 设置当前为第一页
                        displayPage(1);//显示第一页

                        document.getElementById("btn0").innerHTML="当前 " + curPage + "/" + page + " 页 ";    // 显示当前多少页
                        document.getElementById("sjzl").innerHTML="数据总量 " + len + "";        // 显示数据量



                        $("#btn1").click(function firstPage(){    // 首页
                            curPage=1;
                            direct = 0;
                            displayPage();
                        });
                        $("#btn2").click(function frontPage(){    // 上一页
                            direct=-1;
                            displayPage();
                        });
                        $("#btn3").click(function nextPage(){    // 下一页
                            direct=1;
                            displayPage();
                        });
                        $("#btn4").click(function lastPage(){    // 尾页
                            curPage=page;
                            direct = 0;
                            displayPage();
                        });
                        $("#btn5").click(function changePage(){    // 转页
                            curPage=document.getElementById("changePage").value * 1;
                            if (!/^[1-9]\d*$/.test(curPage)) {
                                alert("请输入正整数");
                                return ;
                            }
                            if (curPage > page) {
                                alert("超出数据页面");
                                return ;
                            }
                            direct = 0;
                            displayPage();
                        });


                        $("#pageSizeSet").click(function setPageSize(){    // 设置每页显示多少条记录
                            pageSize = document.getElementById("pageSize").value;    //每页显示的记录条数
                            if (!/^[1-9]\d*$/.test(pageSize)) {
                                alert("请输入正整数");
                                return ;
                            }
                            len =$("#table1 tr").length - 1;
                            page=len % pageSize==0 ? len/pageSize : Math.floor(len/pageSize)+1;//根据记录条数，计算页数
                            curPage=1;        //当前页
                            direct=0;        //方向
                            firstPage();
                        });

                        function displayPage(){
                            if(curPage <=1 && direct==-1){
                                direct=0;
                                alert("已经是第一页了");
                                return;
                            } else if (curPage >= page && direct==1) {
                                direct=0;
                                alert("已经是最后一页了");
                                return ;
                            }

                            lastPage = curPage;

                            // 修复当len=1时，curPage计算得0的bug
                            if (len > pageSize) {
                                curPage = ((curPage + direct + len) % len);
                            } else {
                                curPage = 1;
                            }


                            document.getElementById("btn0").innerHTML="当前 " + curPage + "/" + page + " 页 ";        // 显示当前多少页

                            begin=(curPage-1)*pageSize + 1;// 起始记录号
                            end = begin + 1*pageSize - 1;    // 末尾记录号


                            if(end > len ) end=len;
                            $("#table1 tr").hide();    // 首先，设置这行为隐藏
                            $("#table1 tr").each(function(i){    // 然后，通过条件判断决定本行是否恢复显示
                                if((i>=begin && i<=end) || i==0 )//显示begin<=x<=end的记录
                                    $(this).show();
                            });
                        }
                    }
                }
            })

        })
    </script>
</head>

<body>
                    <div class="row">
                        <div class="col-lg-12">
                            <div class="panel panel-default">
                                <div class="panel-heading">停车场车辆信息列表</div>

                                <form id="form2">
                                    <!-- /.panel-heading -->
                                    <table class="table table-bordered table-striped" id="table1">
                                        <thead>
                                        <tr style="font-size: 18px">
                                            <th>车位</th>
                                            <th>车位状态</th>
                                            <th>车牌号码</th>
                                            <th>进入时间</th>
                                            <th>出去时间</th>
                                            <th>停车时间</th>
                                            <th>停车花费</th>

                                        </tr>
                                        </thead>

                                    </table>
                                </form>
                            </div>
                            <div class="aa" align="right">
                                <a id="btn0"></a> <a id="sjzl"></a> <a href="#" id="btn1">首页</a> <a href="#" id="btn2">上一页</a> <a href="#" id="btn3">下一页</a> <a href="#" id="btn4">尾页</a> <a>转到 </a> <input
                                    id="changePage" type="text" size="1" maxlength="4" /> <a>页
                            </a> <a href="#" id="btn5">跳转</a>

                            </div>
                            <!-- /.panel-body -->
                        </div>
                        <!-- /.panel -->
                    </div>
                    <!-- /.col-lg-12 -->
                    <!--   </div>-->




    <!-- jQuery -->
    <script src="../js/jquery.min.js"></script>

    <!-- Bootstrap Core JavaScript -->
    <script src="../js/bootstrap.min.js"></script>

    <!-- Metis Menu Plugin JavaScript -->
    <script src="../js/metisMenu.min.js"></script>

    <!-- DataTables JavaScript -->
    <script src="../js/jquery.dataTables.min.js"></script>
    <script src="../js/dataTables.bootstrap.min.js"></script>

    <!-- Custom Theme JavaScript -->
    <script src="../js/sb-admin-2.js"></script>

</body>

</html>